import React, { Suspense } from 'react'
// 一般都是在根组件中配置前端路由规则. 因为Route组件在哪里使用,则Route组件中配置的页面组件就渲染在哪里
import { Routes, Route, Link } from 'react-router-dom'
// 下面的引入方式会导致所有的路由组件一上来就全部加载了
// import Home from './pages/Home'
// import Login from './pages/Login'
// import Test1 from './pages/Test1'
// import Test2 from './pages/Test2'

// 使用下面的方式,可以实现路由组件的懒加载.(懒加载就是需要的时候才加载)
const Home = React.lazy(() => import('./pages/Home'))
const Login = React.lazy(() => import('./pages/Login'))
const Test1 = React.lazy(() => import('./pages/Test1'))
const Test2 = React.lazy(() => import('./pages/Test2'))

function load(Son) {
  return (
    <Suspense
      fallback={
        <div style={{ color: 'red', fontSize: 60 }}>正在加载,请稍等...</div>
      }
    >
      <Son></Son>
    </Suspense>
  )
}
export default function App() {
  return (
    <div id="app">
      <Link to="/home">首页</Link>
      <Link to="/login">登录</Link>

      <hr />

      <Routes>
        <Route path="" element={load(Home)}></Route>
        <Route path="home" element={load(Home)}>
          <Route path="test1" element={load(Test1)}></Route>
          <Route path="test2" element={load(Test2)}></Route>
        </Route>
        {/* xxx这个参数是必填的 */}
        {/* <Route path="login/:xxx" element={load(Login)}></Route> */}
        {/* <Route path="login/:xxx/:yyy" element={load(Login)}></Route> */}
        {/* xxx这个参数是可选的 */}
        {/* <Route path="login">
          <Route path="" element={load(Login)}></Route>
          <Route path=":xxx" element={load(Login)}></Route>
        </Route> */}
        {/* 上面的写法,解析完毕之后其实就相当于是按照下面的方式写的 */}
        {/* <Route path="/login" element={load(Login)}></Route>
        <Route path="/login/:xxx" element={load(Login)}></Route> */}
        {/* xxx是必填的,yyy是可选的 */}
        {/* <Route path="login/:xxx">
          <Route path="" element={load(Login)}></Route>
          <Route path=":yyy" element={load(Login)}></Route>
        </Route> */}
        {/* xxx和yyy都是可选 */}
        <Route path="login">
          <Route path="" element={load(Login)}></Route>
          <Route path=":xxx">
            <Route path=":yyy" element={load(Login)}></Route>
            <Route path="" element={load(Login)}></Route>
          </Route>
        </Route>
        {/* xxx和yyy都是可选的常规写法 */}
        {/* <Route path="/login" element={load(Login)}></Route>
        <Route path="/login/:xxx" element={load(Login)}></Route>
        <Route path="/login/:xxx/:yyy" element={load(Login)}></Route> */}
      </Routes>
      <hr />
    </div>
  )
}
